<template>
  <div>
    <el-row>
      <el-col :span="6"></el-col>
      <el-col :span="10">
        <div class="grid-content ep-bg-purple" />
        <span class="logo-text">三藏药业</span>
      </el-col>
      <el-col :span="6"
        ><div class="grid-content ep-bg-purple-light" />
        <el-button @click="Login" v-if="!isLogin" type="primary"
          >登录</el-button
        >
        <el-button @click="logout" v-else type="primary" plain>退出</el-button>
        <span v-if="isLogin">欢迎您：{{ user.username }}</span>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
export default {
  components: {},
  data() {
    return {
      isLogin: false, //是否登录的标志
      user: {}, //用户数据
    };
  },

  computed: {},
  // 方法集合
  methods: {
    //登录跳转
    Login() {
      this.$router.push("/login");
    },
    //登出方法
    logout() {
      console.log("用户登出");
      console.log(localStorage.getItem("userToken"));
      this.$router.push("/login").catch((err) => err);
      localStorage.removeItem("userToken");
      this.login = true;
      console.log(localStorage.getItem("userToken"));
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    if (localStorage.getItem("userToken")) {
      this.isLogin = true;
      this.user = JSON.parse(localStorage.getItem("userToken"));
      //this.$router.push("/home/list"); //路由跳转
    } else {
      this.isLogin = false;
    }
  },
};
</script>
<style >
.logo-text {
  font-family: "Arial", sans-serif; /* 使用无衬线字体 */
  font-size: 2.5em; /* 设置字体大小 */
  font-weight: bold; /* 设置字体加粗 */
  color: #42b983; /* 设置字体颜色 */
  text-align: center; /* 文本居中对齐 */
  margin: 20px 0; /* 上下外边距 */
  padding: 10px 0; /* 上下内边距 */
  border-bottom: 2px solid #420083; /* 底部边框 */
  text-transform: uppercase; /* 文本转换为大写 */
  letter-spacing: 2px; /* 字母间距 */
  background-color: #f9f9f9; /* 背景颜色 */
  border-radius: 5px; /* 圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
</style>